Creating a Custom Control Starting with a ViewBox Control

Description

The easiest way to create a new Custom Control is to start by creating a ViewBox control and then once you are satisfied with the ViewBox control copy the generated Javascript from the ViewBox builder to the Custom control.

Copying JSON from a ViewBox Control Definition to a Custom Control

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [ViewBox] option to add a viewbox control to the component.

    images/ccc3.png
  2. Highlight the ViewBox control in the controls tree. In the properties list on the right click the [...] button next to the 'ViewBox properties' property in the ViewBox Properties section.

    images/ccc4.png
  3. From the ViewBox builder, click the Show button at the bottom left corner of the dialog. Then select the 'Javascript code to render ViewBox' menu command.

    images/ccc2.png
  4. Copy the code for the 'Settings' object. Click OK and OK again. This is the code you will paste into the Settings JSON property in the Custom Control builder.

    images/ccc5.png
  5. On the UX Controls page return to the Data Controls menu and click on the [CustomControl] option.

    images/ccc9.png
  6. Highlight the added 'databound custom control' in the controls tree. In the properties list on the right click the [...] button next to the 'Control properties' property.

    images/ccc6.png
  7. Click the [...] button next to the 'Settings JSON' property.

    images/ccc7.png
  8. Paste the copied code into the 'Specify JSON' dialog.

    images/ccc8.png

See Also